<template>
    <n-layout style="height: 900px">
        <n-layout-header style="height: 64px;text-align: center; padding: 24px" bordered>
            军力预演项目
        </n-layout-header>
        <!-- 菜单 -->
        <n-layout position="absolute" style="top: 64px; bottom: 64px" has-sider>
            <n-layout-sider content-style="padding: 24px;" :native-scrollbar="false" bordered>
                <n-modal-provider>
                    <n-message-provider>
                        <MenuContent></MenuContent>
                    </n-message-provider>                   
                </n-modal-provider>
            </n-layout-sider>
            <!-- 内容 -->
            <n-layout content-style="padding: 24px;background-color: beige;height:100%" :native-scrollbar="false" id="test">
                <cesiumMap></cesiumMap>
            </n-layout>
        </n-layout>
        <n-layout-footer position="absolute" style="height: 64px; padding: 24px" bordered>
            <n-space justify="center" v-if=" this.$store.state.isEditScenario">
                {{ this.$store.state.scenarioName}}
                <n-button type="success" @click="saveScenario">
                    保存
                </n-button>
                <n-button type="primary" @click="cancelScenario">
                    取消
                </n-button>
                </n-space>       
        </n-layout-footer>
    </n-layout>
</template>
<script>
import { defineComponent, onMounted } from "vue";
import { useStore } from 'vuex';
import cesiumMap from "@/components/cesiumHtml.vue";
import MenuContent from '@/views/MenuContent.vue'
import { NLayout, NLayoutHeader, NLayoutSider, NLayoutFooter,NModalProvider,NSpace,NButton,NMessageProvider } from 'naive-ui';

export default defineComponent({
    components: {
        cesiumMap,MenuContent,
        NLayout, NLayoutHeader, NLayoutSider, NLayoutFooter,NModalProvider,NSpace,NButton,NMessageProvider
    },
    data(){
        return {

        }
    },
    setup() {

        const store = useStore();
        onMounted(()=>{
            document.body.style.top = '0px';
            document.addEventListener('contextmenu', function(event) {
                event.preventDefault();
                //alert('右键功能被禁用!');
            });
        });

        const saveScenario = ()=>{
            console.log(store);
            let scenarioDeduce =store.state.scenarioDeduce;
            let curScenario = scenarioDeduce.getCurScenario();
            curScenario.destroy()

            scenarioDeduce.getDataHandler().save(curScenario);
            store.state.isEditScenario = false;
            store.state.scenarioName = "";
        }

        const cancelScenario = ()=>{
            let scenarioDeduce = store.state.scenarioDeduce;
            let curScenario = scenarioDeduce.getCurScenario();
            curScenario.destroy()
            scenarioDeduce.delectScenarios([curScenario]);
            store.state.isEditScenario = false;
            store.state.scenarioName = "";
        }

        return{
            // isEditScenario: useStore().state.isEditScenario ,
            // scenarioName:   useStore().state.scenarioName,
            onMounted,
            saveScenario,cancelScenario
        }
    }
});

</script>